<template>
  <div class="box">
    <div class="content">
      <div class="header">
        <!-- 头部标题 -->
        <div class="h_title">
          <span class="title">已完成数据</span>
        </div>

        <!-- 按页码搜索 -->
        <div class="operation">
          <div class="search">
            <el-select v-model="search_num" @change="filterNum" filterable clearable placeholder="请输入页码">
              <el-option v-for="item in finishList" :key="item.num" :label="item.num" :value="item.num"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <!-- 已完成数据表格 -->
      <div class="finish">
        <el-table 
            class="table" 
            :data="tempList" 
            style="width: 100%" 
            height="400"
            :row-class-name="tableRowClassName"
            @row-click="showOne">
          <el-table-column label="序号" type="index" :index="indexMethod" width="60" />
          <!-- <el-table-column type="selection" width="50" />  -->
          <el-table-column prop="pagecode" label="编号" width="200" />
          <el-table-column prop="num" label="页码" width="150" />
          <el-table-column 
              prop="rates" 
              :formatter="ratesData" 
              label="评判人" 
              width="250" 
              />
          <el-table-column prop="result" :formatter="resultData" label="评判结果" width="400"/> 
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="finishList.length"
        @size-change="handleSizeChange(pageSize)"
        @current-change="handleCurrentChange" 
      />
    </div>
    <!-- 弹出框 -->
    <el-dialog
      v-model="showDialog"
      width="80%"
      destroy-on-close
      center>
        <div class="dialog_box">
          <!-- 图片 -->
          <div class="dialog_img_box">
            <VueCropper
              class="dialog_img"
              :img="dialogImg"
              :canMove=true
              ref="cropper">
            </VueCropper>
          </div>

          <!-- 用户头像 -->
          <div class="avatar_box">
            <div class="item_box">
              <el-button class="btn" type="success">优秀:</el-button>
              <div class="item_avatar_box" v-for="(item, index) in bestList" :key="index">
                <img class="avatar" :src="item" alt="">
              </div>
            </div>
            <div class="item_box">
              <el-button class="btn" type="warning">一般:</el-button>
              <div class="item_avatar_box" v-for="(item, index) in poorList" :key="index">
                <img class="avatar" :src="item" alt="">
              </div>
            </div>
            <div class="item_box">
              <el-button class="btn" type="danger">排除:</el-button>
              <div class="item_avatar_box" v-for="(item, index) in removeList" :key="index">
                <img class="avatar" :src="item" alt="">
              </div>
            </div>
          </div>
        </div>
      
        <template #footer>
          <span class="current_num">{{ this.finishDataIndex }} / {{ this.length }}</span>
          <span class="change_view">
            <el-button type="primary"  @click="clickPrev" :disabled="finishDataIndex === 1">上一个</el-button>
            <el-button type="primary" @click="clickNext"  :disabled="finishDataIndex === length">下一个</el-button>
          </span>
          <span>
            <el-button @click="showDialog = false">返回</el-button>
            <el-button type="primary" @click="showDialog = false">确定</el-button>
          </span>
        </template>
    </el-dialog>
  </div>
</template>

<script>
  import { VueCropper } from 'vue-cropper'

  export default {
    components: {
      VueCropper
    },
    data() {
      return {
        finishList: [],       // 后台数据
        tempList: [],         // 表格数据

        finishDataIndex: 1,   // 已完成数据下标
        length: 0,            // 所有 finishList中 数据的总数

        search_num: '',      // 搜索栏绑定页码

        currentPage: 1,   //当前页
        pageSize: 10,     //每页行数

        showDialog: false,    // 控制 dialog 显示与隐藏
        dialogImg: '',        // dialog 显示图片 url
        bestList: [],         // dialog 评判【优秀】 用户图像
        poorList: [],         // dialog 评判【一般】 用户图像
        removeList: []        // dialog 评判【排除】 用户图像
      }
    },
    watch: {
      'search_num': async function() {
        if (!this.search_num) {
          this.currentChangePage(this.finishList, this.currentPage);
        }
      },
      'finishList': function() {
        this.currentChangePage(this.finishList, this.currentPage);
      }
    },
    methods: {
      // 初始化 bestList poorList removeList
      initList() {
        this.bestList = []
        this.poorList = []
        this.removeList = [] 
      },

      // 获取完成数据
      async getFinishData() {
        try {
          let res = await this.axios.get('http://wuwei.dayaar.com.cn:5432/getFinishData')
          
          this.finishList = res.data
          this.tempList = res.data
          console.log(this.finishList);

          this.length = this.finishList.length
        } catch(err) {
          console.log(err);
        }
      },
      
      // 查找页码
      filterNum() {
        this.tempList = []
        this.finishList.filter((item) => {
          if ('num' in item) {
            if (item.num === this.search_num) {
              this.tempList.push(item)
            }
          } 
        })
      },

      // ----- 分页 --------
      // 每页条数切换
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.handleCurrentChange(this.currentPage);
      },
      // 页码切换
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.currentChangePage(this.finishList, this.currentPage);
      },
      // 分页方法
      currentChangePage(list, currentPage) {
        let from = (currentPage - 1) * this.pageSize;
        let to = currentPage * this.pageSize;
        this.tempList = [];
        for (; from < to; from++) {
          if (list[from]) {
            this.tempList.push(list[from]);
          }
        }
        // console.log('------- tampList --------');
        // console.log(this.tempList);
      },

      // 获取评判人员头像
      pushAvatar(item) {
        for(let i in item) {
          // console.log(row.rates[i]);
          if (item[i].result === "1") {
            // console.log(row.rates[i].headimgurl);
            this.bestList.push(item[i].headimgurl)
            // console.log(this.bestList);
          } else if (item[i].result ==="2") {
            this.poorList.push(item[i].headimgurl)
          } else {
            this.removeList.push(item[i].headimgurl)
          }
        }
      },

      // 自定义下表
      indexMethod(index) {
        return index + 1
      },

      // 返回 rates 中用户名
      ratesData(row) {
        let arr = []
        row.rates.forEach((item, index)=>{
          if (index < 0) {
            return
          }
          arr.push(item.username);
        })
        return arr.join(',')
      },

      // 返回 rates 中用户评判的结果
      resultData(row) {
        let arr = []
        row.rates.forEach((item, index)=>{
          if (index < 0) {
            return
          }
          if (item.result === "1") {
            arr.push("优秀");
          } else if (item.result === "2") {
            arr.push("一般");
          } else {
            arr.push("排除");
          }
        })
        return arr.join(',')
      },


      // 获取 行index
      tableRowClassName({row, rowIndex}) {
        row.index = rowIndex
      },

      // 点击获取某一行数据
      async showOne(row) {
        // row.index 表示表格数据的下表
        // console.log(row.index);
        this.finishDataIndex = row.index + 1
        console.log(this.finishDataIndex);
        this.showDialog = true
        
        // 初始化 bestList poorList removeList
        this.initList();

        // 对话框中的图片
        this.dialogImg = 'http://www.dayaar.com.cn/evaluation-platform' + row.filename
     
        this.pushAvatar(row.rates)

        console.log(row);
      },

      // 点击【上一个】切换图片
      clickPrev() {
        // 初始化 bestList poorList removeList
        this.initList();

        let index = this.finishDataIndex --
        this.dialogImg = 'http://www.dayaar.com.cn/evaluation-platform' + this.finishList[index].filename
        
        this.pushAvatar(this.finishList[index].rates)
      },
      
      // 点击【下一个】切换图片
      clickNext() {
        // 初始化 bestList poorList removeList
        this.initList();

        let index = this.finishDataIndex ++
        this.dialogImg = 'http://www.dayaar.com.cn/evaluation-platform' + this.finishList[index].filename

        this.pushAvatar(this.finishList[index].rates)
      }
    },
    created() {
      this.getFinishData();
    }
  }
</script>

<style lang="less" scoped>
  @import url('../../styles/global.less');
  .box {
    .dialog_box {
      width: 100%;
      display: flex;
      justify-content: space-around;
      .dialog_img_box {
        width: 60%;
        .dialog_img {
          width: 100%;
          height: 400px;
        }
      }
    .avatar_box {
      width: 20%;
      margin-top: 30px;
    }
    }
  }
</style>

<style>
  .el-table {
    background: none;
  }
  .el-dialog {
    margin: 35px auto;
  }
  .el-dialog__body {
    padding: 10px 0 !important;
  }
  .item_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .item_avatar_box {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: space-around;
    margin-left: 5px;
  }
  .avatar {
    width: 100%;
  }
  .current_num {
    position: relative;
    left: -200px;
  }
  .change_view {
    position: relative;
    left: -80px;
  }
</style>